<template>
  <div class="min-h-screen bg-gray-50">
    <div class="px-4 pt-4">
      <nav class="text-sm text-gray-500 flex items-center space-x-2">
        <NuxtLink to="/" class="text-blue-600 hover:underline">首页</NuxtLink>
        <span>/</span>
        <span class="text-gray-700">任务详情</span>
      </nav>
    </div>
    <!-- 页面标题 -->
    <div class="text-center py-6">
      <h1 class="text-xl font-medium text-gray-900">任务详情</h1>
    </div>

    <div class="p-4">
      <!-- 加载状态 -->
      <div v-if="loading" class="text-center py-8">
        <div class="text-gray-500">加载中...</div>
      </div>

      <!-- 任务信息 -->
      <div v-else-if="taskInfo" class="space-y-4">
        <!-- 基本信息卡片 -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <h2 class="text-lg font-medium text-gray-900 mb-3">{{ taskInfo.name }}</h2>

          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-600">任务ID:</span>
              <span class="text-gray-900">{{ taskInfo.id }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">服务类型:</span>
              <span class="text-gray-900">{{ taskInfo.service_type }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">任务周期:</span>
              <span class="text-gray-900">{{ taskInfo.start_time }} 至 {{ taskInfo.end_time }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">任务计费:</span>
              <span class="text-blue-600 font-medium">
                {{ taskInfo.min_fee.toLocaleString() }} - {{ taskInfo.max_fee.toLocaleString() }}元/次
              </span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">工作地点:</span>
              <span class="text-gray-900">{{ taskInfo.work_location }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">年龄要求:</span>
              <span class="text-gray-900">{{ taskInfo.age_requirement }}</span>
            </div>
          </div>
        </div>

        <!-- 任务描述 -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <h3 class="text-base font-medium text-gray-900 mb-3">任务描述</h3>
          <p class="text-gray-700 text-sm leading-relaxed">
            {{ taskInfo.description || '该任务正在招募优秀的自由职业者，欢迎符合条件的朋友报名参与。' }}
          </p>
        </div>

        <!-- 要求说明 -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <h3 class="text-base font-medium text-gray-900 mb-3">任务要求</h3>
          <div class="space-y-2 text-sm">
            <div v-if="taskInfo.education_requirement">
              <span class="text-gray-600">学历要求:</span>
              <span class="text-gray-900 ml-2">{{ taskInfo.education_requirement }}</span>
            </div>
            <div v-if="taskInfo.gender_requirement">
              <span class="text-gray-600">性别要求:</span>
              <span class="text-gray-900 ml-2">{{ taskInfo.gender_requirement }}</span>
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
          <button
            @click="handleApply"
            class="w-full py-3 px-4 bg-blue-500 text-white font-medium rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
          >
            立即报名
          </button>
        </div>
      </div>

      <!-- 错误状态 -->
      <div v-else class="text-center py-8">
        <div class="text-gray-500 mb-4">任务信息加载失败</div>
        <button
          @click="fetchTaskInfo"
          class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
        >
          重新加载
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '~/utils/apiConfig'

const route = useRoute()
const router = useRouter()
const taskId = route.params.id

const loading = ref(true)
const taskInfo = ref(null)

// API 实例
const api = useApi('freelancer')

/**
 * 获取任务详情
 */
const fetchTaskInfo = async () => {
  loading.value = true
  try {
    const response = await api.get(`/tasks/${taskId}`)

    if (response.code === 0) {
      taskInfo.value = response.data
    } else {
      throw new Error(response.message || '获取任务详情失败')
    }
  } catch (error) {
    console.error('获取任务详情失败:', error)
    taskInfo.value = null
  } finally {
    loading.value = false
  }
}

/**
 * 处理报名
 */
const handleApply = async () => {
  // 检查登录状态
  const userToken = localStorage.getItem('userToken')

  if (!userToken) {
    // 未登录，跳转到登录页，携带返回地址
    const returnUrl = `/task/${taskId}`
    await navigateTo(`/login?redirect=${encodeURIComponent(returnUrl)}`)
    return
  }

  // 已登录，跳转到协议签署页面
  await navigateTo(`/contract-sign?taskId=${taskId}`)
}

// 页面初始化
onMounted(() => {
  fetchTaskInfo()
})

</script>

<style scoped>
/* 为底部按钮留出空间 */
.space-y-4 {
  padding-bottom: 80px;
}
</style>
